<template>
  <v-container body-class="pa-2" :scroll="false">
    <div class="full-height d-flex flex-column white pt-2 px-2">
      <el-form inline size="mini">
        <el-form-item label="关键字：">
          <el-input v-model="query.keyword" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button native-type="submit" type="primary" @click.prevent="$refs.table.getData">查询
          </el-button>
          <el-button type="primary" @click="handleShowAddForm">新增 </el-button>
        </el-form-item>
      </el-form>
      <div class="flex-grow-1">
        <custom-table ref="table" :query="query" :load-data="loadData">
          <el-table-column v-for="(item, index) in tableField" :key="index" v-bind="item">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template #default="{ row }">
              <el-link :underline="false" type="primary" @click="handleDetail(row)">查看</el-link>
              <el-link :underline="false" type="primary" @click="handleEdit(row)">编辑</el-link>
              <el-link :underline="false" type="danger" @click="handleDel(row)">删除</el-link>
            </template>
          </el-table-column>
        </custom-table>
      </div>
      <popCustomer :visible.sync="showPopForm" :customerObj="customerObj" :edit="edit" @getList="getList"></popCustomer>
    </div>
  </v-container>
</template>
<script>
  import {
    getCustomersList,
    delCustomer
  } from '@/api/customer'
  import {
    setStorage
  } from '@/utils/auth'
  import popCustomer from './components/popCustomer'
  export default {
    components: {
      popCustomer
    },
    data() {
      return {
        query: {
          keyword: ''
        },
        loadData: ()=>{},
        showPopForm: false,
        id: 0,
        edit: '',
        customerObj: {},
        tableField: [
          {
            prop: 'name',
            label: '企业名称',
            align: 'center'
          },
          {
            prop: 'contactPerson',
            label: '联系人',
            align: 'center'
          },
          {
            prop: 'contactMobile',
            label: '联系电话',
            align: 'center'
          },
          {
            prop: 'address',
            label: '备注',
            align: 'center'
          }
        ],
        userList: []
      }
    },
    mounted() {
      this.loadData = getCustomersList
    },
    methods: {
      getList() {
        this.$refs.table.getData()
      },
      handleShowAddForm() {
        this.edit = 'add'
        this.showPopForm = true
      },
      handleDetail(row) {
        this.$router.push({path: '/customer/customerDetail'})
        setStorage('detail', row)
      },
      handleEdit(row) {
        this.customerObj = row
        this.edit = 'edit'
        this.showPopForm = true
      },
      handleDel(row) {
        this.$confirm('确定删除此账号？', '提示', {
          type: 'warning'
        }).then(() => {
          delCustomer(row.customerId).then(() => {
            this.$message.success('操作成功')
            this.getList()
          })
        })
        .catch(() => {})
      }
    }
  }
</script>